<template>
  <div class="content">
    <div class="filter-wrap">
      <div class="box-flex">
        <div class="flex">
          <zx-form-group :title="$t('STATE_OF_COMPLAINT')">
            <zx-select :place="$t('CURRENCY_PLACE')" v-model="state" class="boxShadow" @change='changeValue'>
              <zx-option value=''>{{'ALL'|t}}</zx-option>
              <zx-option value='0'>{{'APPLICATION'|t}}</zx-option>
              <zx-option value='1'>{{'ADOPT'|t}}</zx-option>
              <zx-option value='2'>{{'REFUSE'|t}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
        <div class="flex">
          <zx-form-group :title="$t('TYPE_OF_COMPLAINT')">
            <zx-select :place="$t('TYPE_PALCE')" v-model="type" class="boxShadow" @change='changeValue'>
              <zx-option value="">{{'ALL'|t}}</zx-option>
              <zx-option value="0">{{'BUYER_APPLICATION'|t}}</zx-option>
              <zx-option value="1">{{'SELLER_APPLICATION'|t}}</zx-option>
            </zx-select>
          </zx-form-group>
        </div>
      </div>
    </div>

    <ul class="dispute-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <li class="dispute-item boxShadow" v-for="(item,key) of dataList" :key="key" @click="$router.push({path:'/manage/dispute/detail',query:{id:item.id}})">
        <div class="dispute-top">
          <span class="left" v-if="item.type=='0'">{{'BUYER_APPLICATION'|t}}</span>
          <span class="left" v-else>{{'SELLER_APPLICATION'|t}}</span>
          <span class="right" v-if='item.state=="0"'>{{'APPLICATION'|t}}</span>
          <span class="right" v-else-if='item.state=="1"'>{{'ADOPT'|t}}</span>
          <span class="right" v-else-if='item.state=="2"'>{{'REFUSE'|t}}</span>
        </div>
        <div class="dispute-time">{{item.dateFormatDate}}</div>
        <div class="dispute-desc">{{item.remark}}</div>
      </li>
    </ul>
    <zx-no-data v-model='showNoDataBool'></zx-no-data>
  </div>
</template>
<script>
  import { Form, Func, Auth } from '@/providers';
  import { C2c, Coins } from '@/services';

  export default {
    data() {
      return {
        state: '',
        type: '',
        allCoinTypeList: [],
        dataList: [],
        cancelItem: {},
        ConfirmReceiveItem: {},
        loading: false,
        loadingBool: true,
        ConfirmPayItem: {},
        showNoDataBool: false,
        pageSize: 1,
        stepOrder: '' //  cancel 取消订单  ,ConfirmReceive  确认收款 ,ConfirmPay 确认付款
      };
    },
    methods: {
      changeValue() {
        // this.loadMore();
      },
      async loadMore() {
        if (this.loading) { return false; };
        this.loading = true;
        try {
          let res = await C2c.DetSpotDispute({
            userNo: Auth.getItem('userId'),
            type: this.type, // 类型：0：买家申请，卖家未转账，1：卖家申请，买家未打款’ ，传null默认全部
            state: this.state, // 状态 1：通过，2：拒绝, 传null默认全部
            pageSize: this.pageSize,
            lineSize: 10
          });
          if (!Form.checkResToken(res)) return false;
          if (res.data.dtoList.length >= 10) {
            this.loading = false;
          }
          this.pageSize += 1;
          this.dataList = [...this.dataList, ...res.data.dtoList];
          this.showNoDataBool = res.data.dtoSize == 0 ? true : false;
        } catch (error) {
          console.log(error);
        }
      },
      getPass(val) {
        switch (this.stepOrder) {
          case 'cancel':
            // 取消订单
            this.cancelOrderFn(this.cancelItem, val);
            break;
          case 'ConfirmReceive':
            this.ConfirmReceive(this.ConfirmReceiveItem, val);
            // 确认收款
            break;
          case 'ConfirmPay':
            // 确认付款
            this.ConfirmPay(this.ConfirmPayItem, val);
            break;
        }
      },
      // 确认收款或付款
      async comfirmOrder(item) {
        if (item.type == 1) {
          // 卖
          this.stepOrder = 'ConfirmReceive';
          this.showBool = true;
          this.ConfirmReceiveItem = item;
        } else {
          // 买
          this.stepOrder = 'ConfirmPay';
          this.showBool = true;
          this.ConfirmPayItem = item;
        }
      },
      // 确认收款
      async ConfirmReceive(item, pass) {
        try {
          let res = await C2c.ConfirmReceive({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            dealPassword: Func.PasswordEncrypt(pass),
            dealNo: item.id
          });
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc, () => {
            this.getData();
          });
        } catch (error) {
          console.log(error);
        }
      },
      // 确认付款
      async ConfirmPay(item, pass) {
        try {
          let res = await C2c.ConfirmPay({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            dealPassword: Func.PasswordEncrypt(pass),
            dealNo: item.id
          });
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc, () => {
            this.getData();
          });
        } catch (error) {
          console.log(error);
        }
      },
      cancelConfirm(item) {
        this.$dialog.Confirm({
          title: this.$t('WARMTIPS'),
          msg: '此操作将取消该订单，是否继续?',
          onOk: () => {
            this.stepOrder = 'cancel';
            this.cancelItem = item;
            this.showBool = true;
          },
          cancel: () => {
            console.log('cancel');
          }
        });
      },
      // 取消订单
      async cancelOrderFn(item, pass) {
        try {
          let res = await C2c.CancelDealDetail({
            userNo: Auth.getItem('userId'),
            token: Auth.getItem('token'),
            dealNo: item.id,
            dealPassword: Func.PasswordEncrypt(pass),
            userNoType: item.type
          });
          if (!Form.checkResToken(res)) return false;
          Form.Totas(res.desc, () => {
            this.getData();
          });
        } catch (error) {
          console.log(error);
        }
      },
      async getData() {
        try {
          let res = await C2c.DetSpotDispute({
            userNo: Auth.getItem('userId'),
            // token: Auth.getItem('token'),
            type: this.type, // 类型：0：买家申请，卖家未转账，1：卖家申请，买家未打款’ ，传null默认全部
            state: this.state, // 状态 1：通过，2：拒绝, 传null默认全部
            pageSize: this.pageSize,
            lineSize: 10
          });
          if (!Form.checkResToken(res)) return false;
          this.dataList = res.data.dtoList;
        } catch (error) {
          console.log(error);
        }
      }
    },
    watch: {
      type() {
        this.pageSize = 1;
        this.loading = false;
        this.dataList = [];
      },
      state(val) {
        // this.$router.push({ path: '/manage/order', query: { type: val } });
        this.dataList = [];
        this.pageSize = 1;
        this.loading = false;
      }
    },
    created() {
      // this.GetAllCoinType();
      // this.getData();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/sass/manage.scss";
</style>